<aside class="aui-aside-control">
  <div class="aui-aside-control__toggle" @click="asideControlOpen = !asideControlOpen">
    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
  </div>
  <div class="aui-aside-control__inner">
    <div class="aui-aside-control__bd">
      <el-tabs class="aui-tabs aui-tabs--flex" v-model="asideControlTabsActive">
        <el-tab-pane label="Layout" name="layout">
          <dl class="aui-aside-control__setting">
            <dt>Header</dt>
            <dd><el-checkbox v-model="headerFixed">Fixed 固定</el-checkbox></dd>
            <dd><el-checkbox v-model="headerSkin" true-label="colorful" false-label="white">Colorful 鲜艳</el-checkbox></dd>
          </dl>
          <dl class="aui-aside-control__setting">
            <dt>Aside</dt>
            <dd><el-checkbox v-model="asideFixed">Fixed 固定</el-checkbox></dd>
            <dd><el-checkbox v-model="asideSkin" true-label="dark" false-label="white">Dark 鲜艳</el-checkbox></dd>
          </dl>
          <dl class="aui-aside-control__setting">
            <dt>Aside-control</dt>
            <dd><el-checkbox v-model="asideControlFixed">Fixed 固定</el-checkbox></dd>
          </dl>
          @@content
        </el-tab-pane>
        <el-tab-pane label="Skins" name="skins">
          <dl class="aui-aside-control__setting">
            <dt>Skins</dt>
            <dd v-for="item in skinList" :key="item.name">
              <el-radio v-model="skin" :label="item.name" @change="skinChangeHandle">
                <span class="t-capitalize">{{ item.name }}</span> {{ item.remark }}
              </el-radio>
            </dd>
          </dl>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</aside>